<template>
  <layout :appHeader="{ 'title': $route.name }">
    <scroll-view class="product-list" scroll-y="true" v-if="workOrderList.length > 0">
      <view v-for="(item, index) in workOrderList" :key="index" class="product-item-container">
        <view class="body" @click="gotoDetail(item.id)">
          <view class="overview">
            <view class="row">
              <view class="label">流水號: </view>
              <view class="value">{{item.id}}</view>
            </view>
            <view class="row">
              <view class="label">申請人: </view>
              <view class="value">{{item.creator.name}}</view>
            </view>
            <view class="row">
              <view class="label">創建時間: </view>
              <view class="value">{{formatterDate(item.creationDate)}}</view>
            </view>
            <view class="row">
              <view class="label">当前节点: </view>
              <view class="value">{{statusFormatter(item.status)}}</view>
            </view>
          </view>
        </view>
        <!-- <view class="footer">
          <button class="detail-button" @click="handleRevoke()">撤銷</button>
        </view> -->
      </view>
    </scroll-view>
    <view v-else class="no-data">
      <image class="no-data-image" src="https://perfectdiary-public-dev.oss-cn-shenzhen.aliyuncs.com/material/image/2021/07/7ae9b327b8eb4e29a712b87518049e78.png" />
    </view>
  </layout>
</template>
<script>
export default {
  data() {
    return {
      workOrderList: []
    };
  },
  onLoad() {
    this.list();
  },
  methods: {
    list() {
      uni.showLoading({
        title: '加载中',
        mask: true
      })
      uni.$API.WorkOrder.listWorkOrder().then(res => {
        this.workOrderList = res.data.list
        uni.hideLoading()
      }).catch(error => {
        uni.hideLoading()
      })
    },
    gotoDetail(id) {
      uni.navigateTo({
        url: `pages/account/entrustmentDetail/index?id=${id}`,
      });
    },
    handleRevoke() {
    },
    statusFormatter(status) {
      switch (status) {
        case 0:
          return '已提交托單申請'
        case 1:
          return '資料已上傳'
        case 2:
          return '保單已生成'
        case 3:
          return '已完成'
        default:
          return ''
      }
    },
    formatterDate(value) {
      return uni.$co.Common.parseTime(value)
    }
  },
};
</script>
<style lang="scss" scoped>
.product-list {
  padding-left: 20rpx;
  padding-right: 20rpx;
  margin-top: 20rpx;
  margin-bottom: 20rpx;
  box-sizing: border-box;
  color: #42475f;
  .product-item-container {
    position: relative;
    padding: 0 30rpx 30rpx 30rpx;
    margin-bottom: 24rpx;
    background: #ffffff;
    border-radius: 12rpx;
    .body {
      padding: 20rpx 20rpx 20rpx 0;
      display: flex;
      align-items: center;
      .overview {
        display: flex;
        flex-direction: column;
        flex: 2;
        .row {
          font-size: 28rpx;
          font-weight: 500;
          line-height: 88rpx;
          height: 88rpx;
          display: flex;
          justify-content: space-between;
          font-weight: bold;
          .label {
            width: 220rpx;
          }
          .value {
            font-weight: 400;
          }
        }
      }
    }
    .footer {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      .detail-button {
        width: 160rpx;
        display: inline-block;
        height: 70rpx;
        line-height: 70rpx;
        font-size: 24rpx;
        background: #42475f;
        border-radius: 10rpx;
        color: #fff;
        font-weight: bold;
        margin: 0;
        margin-right: 10rpx;
      }
    }
  }
}
.no-data {
  height: 93vh;
  display: flex;
  justify-content: center;
  align-items: center;
  .no-data-image {
    width: 280rpx;
    height: 280rpx;
  }
}
</style>